<template>
  <div class="chooseplace">
    <div class="header2">
      <span class="title2">修改地址</span>
      <span class="text3" @click="keep()">保存</span>
    </div>
    <div class="header2-a"></div>
    <div class="detail">
      <div class="detail-name">
        收货人
        <input text="text" maxlength="10" placeholder="收货人姓名" v-model="receiveName" class="text22">
      </div>
      <div class="detail-phone">
        手机号码
        <input
          text="text"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
          placeholder="请输入您的手机号"
          v-model="phonenum"
        >
      </div>
      <div class="detail-places">
        详细地址
        <input text="text" placeholder="请输入详细地址" v-model="detailplace">
      </div>
      <div class="switchs">
        <div class="text">是否设置为默认地址</div>

        <label class="btn">
          <input class="mui-switch mui-switch-animbg" type="checkbox" v-model="checkbox">
        </label>
      </div>
      <div class="btn" @click="detele">删除收货地址</div>
      <div class="background" v-show="show"></div>

      <div class="bigbox" v-show="show">
        <div class="top">提示</div>
        <div class="toptitle">确认删除地址吗</div>
        <div class="bottoms">
          <div class="bottomleft" @click="nodetele">取消</div>
          <div class="bottomright" @click="detelesure">确认</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "../../../request/api.js"
export default {
  name: "modifyplace",
  data() {
    return {
      phonenum: "",
      value: false,
      shows: "",
      detailplace: "",
      checkbox: "",
      show: "",
      isDefault:'',
      receiveName:'',
    };
  },
  created(){
   let data=this.$route.query
   this.receiveName=data.receiveName
   this.phonenum=data.receivePhone
   this.detailplace=data.receiveAddr
  },
  methods: {
    keep() {
      // console.log('aa')
      if(this.checkbox==true){
        this.isDefault=1
      }else{
       this.isDefault=0
      }
       var reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
      if (!reg.test(this.phonenum)) {
        alert("请输入正确的手机号");
        return false;
      } else {
        console.log(this.isDefault,this.receiveName)
        this.$http({
          method:'post',
          url:api.UPDATEADDRESS,
          data:{
          id:this.$route.query.id,
         isDefault:this.isDefault,
         receiveName:this.receiveName,
         receiveAddr:this.detailplace,
         receivePhone:this.phonenum
        }})
        .then(resp=>{
        console.log(resp)
        this.$router.push({path:'/chooseaddress',
        query:{
          totalprice:this.$route.query.totalprice
        }})
        })
        .catch(resp=>{

        })
      }
    },
    detele() {
      this.show=!this.show
    },
    nodetele(){
      this.show=false
    },
    detelesure(){
      console.log(this.receiveName,this.detailplace)
      this.$http({
        method:'post',
        url:api.ADDRESSDELETE,
        data:{
        id:this.$route.query.id,
        // isDefault:this.isDefault,
        //  receiveName:this.receiveName,
        //  receiveAddr:this.detailplace,
        //  receivePhone:this.phonenum
      }})
      .then(resp=>{
       console.log(resp)
       if(resp.data.success==true){
       this.$router.push({path:'/chooseaddress',
       query:{
         totalprice:this.$route.query.totalprice
       }})
       }else{
         return false
       }
      
      })
       .catch(resp=>{

       })
      
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../less/chooseplace.less";
.header2{
  height: 88px;
  width: 100%;
  background: -webkit-radial-gradient(#a1363c, #7a2326);
  line-height: 88px;
  color: #fff;
   text-align: center;
}
.header2-a {
  background: -webkit-radial-gradient(top, #a1363c, #7a2326);
}
.title2{
margin-left: 3%;
 font-size: 36px;
 color: #ffffff;
}
.text2{
  float: right;
  margin-right: 3%;
}
.text22{
padding-left: 30px;
}
</style>
